import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";

export default class Header extends Component {
  //对props进行类型及必要性限制
  static propTypes = {
    addValue: PropTypes.func.isRequired,
  };
  getIptValue = (event) => {
    // 接收的父组件事件回调函数
    const { addValue } = this.props;
    const { keyCode, target } = event;
    if (keyCode !== 13) return;
    addValue(target.value);
    // 清空输入框
    target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input
          onKeyUp={this.getIptValue}
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
